<template>
  <view class="module-box-container">
    <view class="order-module-box">
      <view class="order-module-header-box">
        <text class="title">我的订单</text>
        <navigator url="/pages/order/order" open-type="switchTab" hover-class="navigator-hover">
          查看更多 >
        </navigator>
      </view>
      <view class="order-module-body-box">
        <navigator v-for="item in orderModules" :key="item.icon" class="item-card"
          :url="`/pages/order/order?item=` + encodeURIComponent(JSON.stringify(item))" open-type="switchTab"
          hover-class="navigator-hover">
          <uni-badge class="uni-badge-left-margin" text="9" absolute="rightTop" size="small">
            <view class="iconfont" :class="item.icon"></view>
          </uni-badge>
          <view class="title-box">{{ item.name }}</view>
        </navigator>
      </view>
    </view>
    <view class="nav-module-box order-module-body-box">
      <navigator v-for="item in stockModules" :key="item.icon" class="item-card" :url="item.pathname"
        hover-class="navigator-hover" open-type="navigate">
        <view class="iconfont" :class="item.icon"></view>
        <view class="title-box">{{ item.name }}</view>
      </navigator>
    </view>
  </view>
</template>

<script setup lang="ts">
const orderModules = [
  {
    icon: 'icon-my-order-obligation',
    name: '待付款',
    pathname: '/order/list',
    params: { finance_status_: '1,50' }
  },
  {
    icon: 'icon-my-order-deliver-goods',
    name: '待发货',
    pathname: '/order/list',
    params: { form_status_: '41,51,61,71' }
  },
  {
    icon: 'icon-my-order-take-over',
    name: '待收货',
    pathname: '/order/list',
    params: { form_status_: '81,91,9999' }
  },
  {
    icon: 'icon-my-order-sales-return',
    name: '换货单',
    pathname: '/exchange/goods/list',
  },
];

let stockModules = [
  { name: '常用清单', icon: 'icon-my-repertoire', pathname: '/pages/user/commonList' },
  { name: '收藏商品', icon: 'icon-my-collect1', pathname: '/pages/user/collect' },
  // {name: '最近浏览', icon: 'icon-my-cookies', pathname: '/footprint'},
  // { name: '订单消息', icon: 'icon-my-message-order', pathname: '/order/message', type: 'dot', },
  // { name: '在线客服', icon: 'icon-my-service', pathname: '/service', type: 'message', },
  { name: '收货地址', icon: 'icon-my-icon-location', pathname: '/pages/user/address' },
  { name: '联系我们', icon: 'icon-my-icon-phone', pathname: '/supplier' },
  { name: '转账充值', icon: 'icon-my-bank-card', pathname: '/offline/transfer' },
  { name: '设置', icon: 'icon-my-set1', pathname: '/setting' },
];

</script>

<style lang="scss" scoped>
.module-box-container {
  position: relative;
  top: -32px;
  margin: 0 12px;

  .order-module-box {
    background: #fff;
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;

    .order-module-header-box {
      display: flex;
      align-content: center;
      align-items: center;
      justify-content: space-between;
      padding: 16px 12px;


      .title {
        font-size: 18px;
        color: #333;
      }

      .txt-btn {
        background: transparent;
        border: 0 none;
        font-size: 16px;
        color: #999;
      }
    }
  }

  .order-module-body-box {
    display: grid;
    grid-template-columns: repeat(4, 25%);

    .item-card {
      padding: 24px 0;
      text-align: center;

      .iconfont {
        &::before {
          font-size: 60rpx;
          color: #666;
        }
      }

      .icon-box {
        margin-bottom: 16px;

        .iconfont {
          font-size: 68px;

          &::before {
            font-size: 60rpx;
            color: #ff9545;
          }
        }
      }

      .title-box {
        font-size: 14px;
        color: #666;
      }
    }
  }

  .nav-module-box {
    background: #fff;
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(4, 25%);

    .nav-item-card {
      padding: 32px 0;
      text-align: center;

      .icon-box {
        margin-bottom: 16px;

        .am-badge {
          line-height: 1.15;
        }

        .iconfont {
          font-size: 48px;
        }
      }

      .title-box {
        font-size: 14px;
        color: #666;
      }
    }
  }

  .item-card {
    padding: 32px 0;
    text-align: center;

    .icon-box {
      margin-bottom: 16px;

      .iconfont {
        font-size: 48px;
      }
    }

    .title-box {
      font-size: 14px;
      color: #666;
    }
  }
}
</style>
